<template>
  <div class="main">

    <el-dialog
      title="修改电影排片"
      :visible.sync="dialog"
      width="50%">

      <el-form ref="form" :model="arrangement" label-width="90px" :rules="rules">

        <el-form-item label="电影名称">
          <el-input :disabled="true" v-model="arrangement.name"></el-input>
        </el-form-item>

        <el-form-item label="开放座位" prop="seatNumber">
          <el-input-number v-model="arrangement.seatNumber" :min="10" :max="100"></el-input-number>
        </el-form-item>

        <el-form-item label="放映类型">
          <el-select v-model="arrangement.type" placeholder="请选择放映类型" :disabled="true">
            <el-option label="2D 放映" value="2D放映"></el-option>
            <el-option label="3D 放映" value="3D放映"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="width: 500px" label="放映日期" prop="date">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="arrangement.date"
                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item style="width: 500px" label="放映时间">
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-time-picker placeholder="开始时间" value-format="HH:mm:ss" v-model="arrangement.startTime"
                              style="width: 100%;" :picker-options="{selectableRange: `00:00:00 - ${arrangement.endTime ? arrangement.endTime : '23:59:59'}`}"></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col style="text-align: center" class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-time-picker placeholder="结束时间" value-format="HH:mm:ss" v-model="arrangement.endTime"
                              style="width: 100%;" :picker-options="{selectableRange: `${arrangement.startTime ? arrangement.startTime : '00:00:00'} - 23:59:59`}"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="电影票价" prop="price">
          <el-input-number v-model="arrangement.price" :precision="2" :step="0.1" :max="999.99"></el-input-number>
        </el-form-item>

        <el-form-item label="排片人">
          <el-input :disabled="true" v-model="arrangement.createName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditArrange">确 定</el-button>
      </span>
    </el-dialog>

    <el-table
      v-loading="loading"
      :data="List.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      height="630"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >

      <el-table-column
        label="电影名"
        prop="name"
      >
        <template slot-scope="scope">
          <el-tooltip
            v-model="scope.row.showTooltip"
            effect="dark"
            :disabled="!scope.row.showTooltip"
            :content="scope.row.name"
            placement="top"
            :open-delay="100">
            <div
              style="font-size: 12px;font-weight: bold;padding-top: 5px;padding-left: 3px;"
              @mouseover="isShowTooltip($event, scope.row)"
            >
              {{scope.row.name | ellipsis}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        label="放映日期"
        prop="date"
        sortable
      >
      </el-table-column>

      <el-table-column
        label="开放座位"
        prop="seatNumber">
      </el-table-column>

      <el-table-column label="放映类型">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.type === '2D放映'" type="success" disable-transitions>2D 放映</el-tag>
          <el-tag effect="dark" v-if="scope.row.type === '3D放映'" type="primary" disable-transitions>3D 放映</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="票房统计/元"
        prop="boxOffice">
      </el-table-column>

      <el-table-column
        label="结束时间"
        prop="endTime">
      </el-table-column>

      <el-table-column label="本场票价">
        <template slot-scope="scope">
          <el-tag size="medium" effect="plain">{{ scope.row.price }} 元</el-tag>
        </template>
      </el-table-column>

      <el-table-column width="300" align="right">
<!--        <template slot="header" slot-scope="scope">-->
<!--          <el-input-->
<!--            v-model="search"-->
<!--            size="mini"-->
<!--            placeholder="请输入电影名称进行搜索"/>-->
<!--        </template>-->
        <template slot="header" slot-scope="scope">
          <el-form>
            <el-input v-model="name"  size="mini" placeholder="请输入电影名称进行搜索" style="width:200px;float: left;margin-left: 18px" />
            <el-button type="primary" size="mini" @click="searchByName">查询</el-button>
          </el-form>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-s-ticket"
            type="success"
            @click="handleBoxOffice(scope.$index, scope.row)">统计票房
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>

          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete(scope.$index, scope.row)"
            title=" 确定要删除此电影档期吗？ "
          >
            <el-button
              style="margin-left: 8px"
              size="mini"
              icon="el-icon-delete"
              type="danger"
              slot="reference">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <div style="text-align:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="this.params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {FindAllArrangement, FindArrangementById, DeleteArrangement, UpdateArrangement, UpdateArrangementByPrice} from "@/api/film";
  import {GetPrices} from "@/api/order"
  import config from "@/config";


  export default {
    name: "Arrange",
    data() {
      return {
        rules: {
          seatNumber: [
            { required: true, message: '请规定座位数量！', trigger: 'blur' }
          ],
          date: [
            { required: true, message: '放映日期不能为空！', trigger: 'blur' }
          ],
          startTime: [
            { required: true, message: '放映开始时间不能为空！', trigger: 'blur' }
          ],
          endTime: [
            { required: true, message: '放映结束时间不能为空！', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '电影票价不能为空！', trigger: 'blur' }
          ],
        },
        dialog: false,
        search: '',
        List: [],
        loading: false,
        arrangement: {
          name: '',
          fid: '',
          seatNumber: 40,
          price: 30.50,
          date: '',
          startTime: '',
          endTime: '',
          createName: '',
          type: '2D放映',
        },
        total: 0,
        params: {
          page: 1,
          limit: 10,
        },
        name: '',
      }
    },

    filters:{
      ellipsis(value){
        if (!value) return '';
        if (value.length > 8) {
          return value.slice(0,8) + '...'
        }
        return value
      }
    },

    mounted() {
      this.listArrangementByPage();
    },

    methods: {

      load () {
        this.loading = true;
        FindAllArrangement().then(res => {
          setTimeout(() => {
            this.loading = false;
            this.List = res.data
          }, 100)
        })
      },

      searchByName() {
        let params = {
          page: this.params.page,
          limit: this.params.limit,
          name: this.name
        };
        this.$axios({
          method: 'get',
          url: config.API_URL + "/arrangement/like",
          params: params,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data.data)
            this.List = res.data.data.list;
            this.total = res.data.data.total;
          })
          .catch((error) => {
            let errMsg = error.response.data.msg;
            this.$message.error(errMsg)
          })
      },

      handleEdit (index, row) {
        this.dialog = true;
        FindArrangementById(row.id).then(res => {
          this.arrangement = res.data;
        })
      },

      submitEditArrange () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            UpdateArrangement(this.arrangement).then(res => {
              if (res.success) {
                this.dialog = false;
                this.$message({
                  message: '排片修改成功！',
                  type: 'success'
                });
              }
              this.listArrangementByPage();
            })
          } else {
            this.$message.error('请完善表单相关信息！');
            return false;
          }
        });
      },

      handleDelete (index, row) {
        DeleteArrangement(row.id).then(res => {
          if (res.success) {
            this.List.splice(index, 1)
            this.$message({
              message: '排片信息删除成功！',
              type: 'success'
            });
          }
        })
      },

      handleBoxOffice (index, row) {
        console.log("统计票房")
        GetPrices(row.fid).then(res => {
          setTimeout(() => {
            console.log(res.data)
            console.log(index)
            console.log(row.fid)
            // this.List[index].boxOffice = res.data
            UpdateArrangementByPrice(row.fid, res.data).then(res => {
              if (res.success) {
                this.$message({
                  message: '票房统计成功!',
                  type: 'success',
                });
                this.load();
              }
            })
          }, 10)
        })
      },

      isShowTooltip (obj, row) {
        if (row.name.length > 8) {
          row.showTooltip = true
        } else {
          row.showTooltip = false
        }
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.limit = val;
        this.listArrangementByPage();
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        this.listArrangementByPage();
      },

      listArrangementByPage:function(){
        this.$axios({
          method: 'get',
          url: config.API_URL + "/arrangement/page?page=" + this.params.page + "&limit=" + this.params.limit,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data);
            this.List = res.data.data.list;
            this.total = res.data.data.total;
          });
      },

    }

  }
</script>

<style scoped>
  .main {
    height: 500px;

  }
</style>
